//weekView.js
window.projectMap = {}

$(function(){
		//Setup week grid
		var weekGrid = $('#weekGrid');
		for(var h = 0; h < 24; h++){
			var hourRow = $('<div class="hourTitle alpha grid_2"/>');
			if(h == 0)
				hourRow.html('<span>12 a.m.</span>');
			else if(h < 12)
				hourRow.html('<span>'+h+' a.m.</span>');
			else if(h == 12)
				hourRow.html('<span>12 p.m.</span>');
			else
				hourRow.html('<span>'+(h-12)+' p.m.</span>');

			for(var d = 0; d < 7; d++)
				hourRow = hourRow.add('<div class="grid_1 day_'+d+'"/>');
			hourRow.last().addClass('omega');
			hourRow.addClass('hour_'+h);
			weekGrid.append(hourRow);
		}

		//process hour objects
		$.each(window.hours, function(index, wrapper){
			//Remove wrapper object
			var hour = window.hours[index] = wrapper.Hour;

			//Parse date field
			hour.date = new Date(hour.date);
			
			//Add hour to project map
			if(window.projectMap[hour.proj_id])
				window.projectMap[hour.proj_id].hours.push(hour);
			else
				window.projectMap[hour.proj_id] = {'name':hour.proj_name, 'hours':[hour]};
		});

		//populate project selection
		var projSelect = $('#projSelect').empty().append(
			$('<option selected>All Projects</option>').attr('value','')
		);
		$.each(window.projectMap, function(projId, proj){
			projSelect.append($('<option>'+proj.name+'</opton>').attr('value',projId));
		});

		//Initialize view with everything
		showHours(window.hours);
});

function showHours(hours){
	var weekGrid = $('#weekGrid');

	//Remove previous buttons and formatting
	$('a.recordButton', weekGrid).remove();
	$('div.validSpan, div.invalidSpan', weekGrid).removeClass('validSpan invalidSpan');

	$.each(hours, function(index, hour){
		var hourBlock = weekGrid.find('div.day_'+hour.date.getDay()+'.hour_'+hour.date.getHours());
		var recordButton = hourBlock.children().first();
		if(recordButton.length == 0){
			recordButton = $('<a href="#" class="recordButton" />').
			text(hour.clock_in?"IN":"OUT").
			data('hourIndex',[index]).
			appendTo(hourBlock);
		} else {
			var indexArray = recordButton.data('hourIndex');
			indexArray.push(index);
			recordButton.text('(X'+indexArray.length+')');
		}
	})

	//Identify clocked timespans
	var timeSpan = $();
	for(var d = 0; d < 7; d++){
	//Iterate through each day
	$('#weekGrid div.day_'+d).each(function(index,Element){
		var dayBlock = $(Element)
		//Locate records for each day
		$('.recordButton', this).each(function(index,Element){
			$.each($(Element).data('hourIndex'),function(dataIndex,hourIndex){
				var hour = window.hours[hourIndex]
				if(timeSpan.length == 0 && hour.clock_in){
				//if timespan is null and record is 'clock_in', start a new span
				timeSpan = $(dayBlock)
				} else if(timeSpan.length && !hour.clock_in){
				//if timespan is not empty && at a clock out record, apply class and close
				timeSpan.add(dayBlock).addClass('validSpan')
				timeSpan = $()
				} else {
				//records are out of order
				timeSpan.add(dayBlock).addClass('invalidSpan')
				timeSpan = $()
				}
				})
			})
		//If span is active, add dayBlock
	if(timeSpan.length)
		timeSpan = timeSpan.add(dayBlock)
	})
	}
	//if span is still open, mark as invalid
	if(timeSpan.length)
		timeSpan.addClass('invalidSpan')
}

$(document).on('click','.recordButton',function(e){ //Register record button click event handler
	e.preventDefault();
	var infoContainer = $('#recordInfoContainer')
	var template = $('div.recordInfo.template');

	//Close existing info blocks
	$('a.close',infoContainer).click();

	//Add new info blocks for each hourIndex in data
	$.each($(this).data('hourIndex'), function(data_index, hour_index){
		var hour = window.hours[hour_index]
		var recordInfo = template.clone().removeClass('template').
			find('.clockIN_OUT').text(hour.clock_in?'CLOCK IN':'CLOCK OUT').end().
			find('.project').text(hour.proj_name).end().
			find('.date').text(hour.date.toLocaleString()).end().
			find('.created').text(hour.created_by).end().
			find('a.editButton').attr('href', function(i,href){return href+'/'+hour.trans_id}).end().
			hide().appendTo(infoContainer).show(600);
	});

	//Show close button
	$('#recordInfoContainer a.close').fadeIn();

}).on('click','#recordInfoContainer a.close', function(e){ //Register info close button
	e.preventDefault();

	//Remove old info blocks
	$('#recordInfoContainer div.recordInfo').hide(600, function(){
		$(this).remove();
	})
	
	//hide close button
	$(this).fadeOut();
}).on('change','#projSelect',function(e){
	var projId = $(this).val();
	if(projId && window.projectMap[projId]){
		showHours(window.projectMap[projId].hours)
	} else {
		showHours(window.hours)
	}
})

